<template>
  <div class="project">
    <h1>{{ info.project_name }}</h1>
    <div class="wrapper">
      <div>
        <span class="text-warning">{{ info.money }}</span
        ><br />
        <span class="title">支持金额（元）</span>
      </div>
      <div>
        <span>{{ info.percent }}</span
        ><br />
        <span class="title">进度</span>
      </div>
    </div>
    <div>
      <span>{{ info.time }}</span
      ><br />
      <span class="title">支持时间</span>
    </div>
    <div class="zhai_box">
      <div v-if="detailInfo.has_confirm>1 || detailInfo.has_confirm_dk>1">
        <div v-if="info.has_authorize===1" class="zhai_quan_1">
          放弃债权
        </div>
        <div class="watch_box" v-else >
          <div v-if="info.rights_state===2">
            <div v-if="info.rights_state===2" class="zhai_quan_1_1">
              已放弃债权至拼车车
            </div>

            <div  v-else class="zhai_quan"  @click="tipsClick(info.id)">
              放弃债权至拼车车
            </div>
            <div class="zhai_quan_2" @click="watchQy(info.project_qy_url)">点击查看协议</div>
          </div>

          <div v-else-if="info.rights_state===3">
            <div v-if="info.rights_state===3" class="zhai_quan_1_1">
              已放弃债权至达客云
            </div>
            <div  v-else class="zhai_quan"  @click="tipsDkClick(info.id)">
              放弃债权至达客云
            </div>
            <div class="zhai_quan_2" @click="watchQyDk(info.project_qy_url_dk)">点击查看协议</div>
          </div>

          <div class="watch_box" v-else-if="detailInfo.has_confirm>1 && detailInfo.has_confirm_dk>1">
            <div>
              <div class="zhai_quan"  @click="tipsClick(info.id)">
                放弃债权至拼车车
              </div>
              <div class="zhai_quan_2" @click="watchQy(info.project_qy_url)">点击查看协议</div>
            </div>

            <div class="new_box">
              <div  class="zhai_quan"  @click="tipsDkClick(info.id)">
                放弃债权至达客云
              </div>
              <div class="zhai_quan_2" @click="watchQyDk(info.project_qy_url_dk)">点击查看协议</div>
            </div>
          </div>
          <div v-else-if="detailInfo.has_confirm>1">
            <div>
              <div class="zhai_quan"  @click="tipsClick(info.id)">
                放弃债权至拼车车
              </div>
              <div class="zhai_quan_2" @click="watchQy(info.project_qy_url)">点击查看协议</div>
            </div>
          </div>
          <div v-else-if="detailInfo.has_confirm_dk>1">
            <div>
              <div  class="zhai_quan"  @click="tipsDkClick(info.id)">
                放弃债权至达客云
              </div>
              <div class="zhai_quan_2" @click="watchQyDk(info.project_qy_url_dk)">点击查看协议</div>
            </div>
          </div>


        </div>
      </div>
      <div v-else>
        <div  class="shou_quan_1">
          请先完成信息授权操作
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import {Modal} from "ant-design-vue";
import info from "../../viewsMobile/person/info";

export default {
  name: "project",
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      detailInfo: {}
    };
  },
  mounted() {
    this.$ajax
            .post(this.$api.getPerson)
            .then(res => {
              this.detailInfo = res.data;
            })
            .catch(err => {
              this.$message.error(err);
            });
  },
  methods:{
    tipsClick(id){
      let that = this;
      if(this.info.project_qy_url){
        Modal.confirm({
          title: "请确认操作",
          content: "此操作将会同步订单信息至广东盛世昊通科技有限公司（董车长APP）",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            that.$ajax
                    .post(that.$api.confirmProjectQy, {p_id:id})
                    .then(res => {
                      if(res.data.project_qy_url){
                        that.$message.success("操作成功");
                        setTimeout(function() {
                          window.location.href = res.data.project_qy_url;
                        }, 1000);
                      }else{
                        that.$message.success("操作失败");
                      }

                    })
                    .catch(err => {
                      that.$message.error(err);
                    });
          },
          onCancel() {
          }
        });
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    },

    tipsDkClick(id){
      let that = this;
      if(this.info.project_qy_url_dk){
        Modal.confirm({
          title: "请确认操作",
          content: "此操作将会同步订单信息至江西达客互联网科技有限公司",
          okText: "确定",
          cancelText: "取消",
          onOk() {
            that.$ajax
                    .post(that.$api.confirmProjectQy, {p_id:id,'dk_type':2})
                    .then(res => {
                      if(res.data.project_qy_url_dk){
                        that.$message.success("操作成功");
                        setTimeout(function() {
                          window.location.href = res.data.project_qy_url_dk;
                        }, 1000);
                      }else{
                        that.$message.success("操作失败");
                      }

                    })
                    .catch(err => {
                      that.$message.error(err);
                    });
          },
          onCancel() {
          }
        });
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    },


    watchQy(url){
      if(url){
        window.location.href = url;
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    },

    watchQyDk(url){
      if(url){
        window.location.href = url;
      }else{
        this.$message.warning("暂未查询到相关协议");
      }

    }

  }
};
</script>

<style scoped lang="less">
.project {
  padding: 31px 48px;
  margin: 28px 61px;
  webkit-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  -moz-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  border-radius: 5px;
  border-bottom: 10px solid @primary-color;
  h1 {
    font-size: 30px;
    font-weight: bold;
  }
  .wrapper {
    .flex_content();
    > div {
      margin: 27px 0;
      .flex_one();
    }
  }
  span {
    font-size: 20px;
  }
  .text-warning {
    font-size: 26px;
    font-weight: bold;
  }
  .title {
    font-size: 20px;
    color: #bdbdbd;
  }
  .zhai_box{
    /*display: flex;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
  }
  .zhai_quan{
    background-color: orange;
    text-align: center;
    width: 230px;
    font-size: 22px;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    margin-top: 10px;
    /*line-height: 50px;*/
  }
  .zhai_quan_1{
    background-color: grey;
    text-align: center;
    width: 150px;
    font-size: 24px;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    margin-left: 35%;
  }
  .zhai_quan_1_1{
    background-color: grey;
    text-align: center;
    width: 230px;
    font-size: 22px;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    margin-top: 10px;
  }
  .shou_quan_1{
    background-color: grey;
    text-align: center;
    width: 300px;
    font-size: 24px;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    margin-left: 20%;
  }
  .watch_agree{
    margin-top: 20px;
    background-color: coral;
    padding: 5px,5px,5px,5px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    width: 230px;
    height: 30px;
    border-radius: 10px;
    line-height: 30px;
  }
  .watch_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .zhai_quan_2{
    margin-left: 20px;
      background-color: #00a9e0;
      text-align: center;
      width: 170px;
      font-size: 24px;
      color: #ffffff;
      border-radius: 10px;
      padding: 10px 5px 10px 5px;
    margin-top: 20px;
  }
  .new_box{
    margin-left: 20px;
  }
}
</style>
